<template>
    <div class="sidebar">
        <!--左上角logo-->
        <Logo :isCollapse="isCollapse"/>
        <el-scrollbar style="height:100%">
            <el-menu unique-opened
                    :default-active="$route.path"
                     :collapse="isCollapse"
                     background-color="rgb(0, 20, 42)"
                     text-color="rgba(255,255,255,0.7)"
                     router>
                <sidebar-item :menuTree="menuTree" :collapse="isCollapse"/>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import Logo from "./logo";
import SidebarItem from "./sidebarItem";

export default {
  name: "index",
  components: {
    Logo,
    SidebarItem
  },
  computed: {
    ...mapGetters(["sidebar"]),
    isCollapse() {
      return this.sidebar.opened;
    },
    menuTree() {
      return this.sidebar.userMenuTree;
    }
  }
};
</script>

<style lang="scss" scoped>
.sidebar {
  height: 100%;
  position: relative;
  background-color: rgb(0, 20, 42);
}
</style>
